<div class="panel panel-default">
	<div class="panel-heading newsfeed">
		<p>Photo Album</p>
	</div>
	<div class="panel-body">
		<div class="row fbphotobox" id="albumcontent">
			<?php foreach($albumimages as $image){?>
			<div class="col-xs-6 col-md-3 box">
				<a href="javascript:void(0)" class="thumbnail">
					<img src="<?php echo base_url('assets/uploads/media/'.$image['media']); ?>" id="<?=$image['postid']?>">
					<div class="redflag" onclick="flaguser('<?=$zapmember['userid']?>')">flag</div>
				</a>	
			</div>
			<?}?>
		</div>
	</div>
</div>
<script type="text/javascript" src="<?php echo base_url('assets/front/js/masonryload.js'); ?>"></script>
<script>
	$(document).ready(function() {
		$(".fbphotobox img").fbPhotoBox({
			rightWidth: 360,
			normalModeMargin: 10,
			leftBgColor: "black",
			rightBgColor: "white",
			footerBgColor: "black",
			overlayBgColor: "#1D1D1D",
			onImageShow: function() {
				var postid=$(this).attr('id');
				var comment='';
				$.ajax({
					url: '<?php echo base_url()?>ajax/getcomments',
					dataType: 'json',
					data:{postid:postid},
					type: "POST",
					beforeSend: function(){
					},
					success: function(json) {
						//alert(json.zapmember.userid);
						comment+='<div class="photocomments">';
						//alert(comment);
						$.each(json.comments, function(i, v) {
							if(v.photo=="")
							{
								cphoto='<?=DEFAULT_IMG?>';
							}
							else
							{
								cphoto=v.photo;
							}
							comment+='<div class="media">';
							comment+='		<a href="#" class="pull-left">';
							comment+='			<img width="32" height="32" class="media-object" alt="Profile-img" src="<?php echo base_url(); ?>assets/uploads/.thumbs/images/zap/'+cphoto+'">';
							comment+='		</a>';
							comment+='		<div class="media-body">';
							comment+='			<h5 class="media-heading text-primary">'+v.firstname+'<p class="text-muted pull-right">'+v.comment_date+'</p></h5>';
							comment+='			<p>'+v.comments+'</p>';
							comment+='		</div>';
							comment+='	</div>';
						});
						comment+='</div>';
						if(json.zapmember.photo=="")
						{
							photo='<?=DEFAULT_IMG?>';
						}
						else
						{
							photo=json.zapmember.photo;
						}
						comment+='<div class="media">';
						comment+='		<a href="#" class="pull-left">';
						comment+='			<img width="32" height="32" class="media-object" alt="Profile-img" src="<?php echo base_url(); ?>assets/uploads/.thumbs/images/zap/'+photo+'">';
						comment+='		</a>';
						comment+='		<div class="media-body">';
						comment+='			<input type="text" placeholder="Write a Comment...." onkeyup="postcomment(event,this,'+postid+')" name="comment" class="form-control">';
						comment+='		</div>';
						comment+='	</div>';
						$(".fbphotobox-image-content").html(comment);
					}
				});
			}
		});
		
		
	});
	function postcomment(ev,obj,cid)
	{
		var comment=obj.value;
		var e = ev || event;
		if(e.keyCode == 13) {
			dataString={ postid: cid, comment: comment };
			$.ajax({
				url: '<?php echo base_url()?>ajax/addphotocomment',
				data:dataString,
				type: "POST",
				beforeSend: function(){
				},
				success: function(data) {
					obj.value="";
					$(".photocomments").prepend(data);
					//$("#"+cid).find('.comments > div div:first').slideDown("slow");
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
			return false; //prevents form from being submitted.
		}
	}
	function flaguser(userid)
		{
			$.ajax({
				url: '<?php echo base_url()?>ajax/flaguser',
				data:{userid:userid},
				type: "POST",
				dataType: 'json',
				beforeSend: function(){
					$('#processing-modal').modal('show');
				},
				success: function(json) {
					if (json['success']) 
					{
						$('#ajax_msg').show().append(json['success']);
						$('html, body').animate({ scrollTop: 0 }, 'slow');
						$('#processing-modal').modal('hide');
					}
				},
				
			});
		}
</script>   